
<!-- 订单材料关系编辑弹窗 -->
<template>
    <div class="ele-body">
        <a-card :title="orderMaterialRelationModalApp.title" :bordered="false">
            <a-form
                    ref="form2"
                    :model="orderMaterialRelationModalApp.orderMaterialRelation"
                    :rules="orderMaterialRelationModalApp.rules"
                    :label-col="{md: {span: 7}, sm: {span: 24}}"
                    :wrapper-col="{md: {span: 17}, sm: {span: 24}}">
                <a-row :gutter="16">
                                                                                                                                                                                                                                            
                                <a-col :lg="6" :md="12" :sm="24" :xs="24">
                                    <a-form-item label="材料订单id:" name="materialOrderId">
                                                                                    <a-input-number
                                                    v-model:value="orderMaterialRelationModalApp.orderMaterialRelation.materialOrderId"
                                                    placeholder="请输入材料订单id"
                                                    :min="0"
                                                    :step="1"
                                                    class="ele-fluid"
                                            ></a-input-number>
                                                                            </a-form-item>
                                </a-col>
                                                                                                                                                            
                                <a-col :lg="6" :md="12" :sm="24" :xs="24">
                                    <a-form-item label="材料id:" name="materialId">
                                                                                    <a-input-number
                                                    v-model:value="orderMaterialRelationModalApp.orderMaterialRelation.materialId"
                                                    placeholder="请输入材料id"
                                                    :min="0"
                                                    :step="1"
                                                    class="ele-fluid"
                                            ></a-input-number>
                                                                            </a-form-item>
                                </a-col>
                                                                                                                                                            
                                <a-col :lg="6" :md="12" :sm="24" :xs="24">
                                    <a-form-item label="材料名称:" name="materialName">
                                                                                    <a-input
                                                    v-model:value="orderMaterialRelationModalApp.orderMaterialRelation.materialName"
                                                    placeholder="请输入材料名称"
                                                    :maxlength="255"
                                                    allow-clear
                                            />
                                                                            </a-form-item>
                                </a-col>
                                                                                                                                                            
                                <a-col :lg="6" :md="12" :sm="24" :xs="24">
                                    <a-form-item label="数量:" name="amount">
                                                                                    <a-input-number
                                                    v-model:value="orderMaterialRelationModalApp.orderMaterialRelation.amount"
                                                    placeholder="请输入数量"
                                                    :min="0"
                                                    :step="0.01"
                                                    class="ele-fluid importanceI"></a-input-number>
                                                                            </a-form-item>
                                </a-col>
                                                                                                                                                                                                                                                        
                    <a-col :md="12" :sm="24" :xs="24">
                        <a-form-item :wrapper-col="{md: {offset: 6}}" style="margin-bottom: -20px">
                            <!--class="ele-pull-right"-->
                            <div v-if="orderMaterialRelationModalApp.display">
                                <teleport to="#orderMaterialRelationEditModalFooter">
                                    <div>
                                        <a-space size="middle">
                                            <a-button @click="orderMaterialRelationListApp.editModalShowing=false">取消
                                            </a-button>
                                            <a-button
                                                    type="primary"
                                                    @click="onSubmit(orderMaterialRelationModalApp.orderMaterialRelation)"
                                                    :loading="loading">提交
                                            </a-button>
                                            <!--<a-button v-if="!eid"
                                                      type="dashed"
                                                      @click="continueSubmit"
                                                      :loading="loading">继续提交
                                            </a-button>-->
                                        </a-space>
                                    </div>
                                </teleport>
                            </div>
                            <div v-if="!orderMaterialRelationModalApp.display">
                                <a-space size="middle">
                                    <a-button @click="onBack()">返回列表</a-button>
                                    <a-button
                                            type="primary"
                                            @click="onSubmit(orderMaterialRelationModalApp.orderMaterialRelation)"
                                            :loading="loading">提交
                                    </a-button>
                                    <!--<a-button v-if="!eid"
                                              type="dashed"
                                              @click="continueSubmit"
                                              :loading="loading">继续提交
                                    </a-button>-->
                                </a-space>
                            </div>

                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </a-card>

    </div>

</template>

<script>
    import {defineComponent, inject, reactive, onMounted} from 'vue'
    import {useRoute, useRouter} from "vue-router"
    import {OrderMaterialRelationService} from "@/views/restaurant/material/orderMaterialRelation/orderMaterialRelationService";
    import {VXETable} from 'vxe-table'
    import {useStore} from "vuex";
    import regions from 'ele-admin-pro/packages/regions.js';

                                                                                                                                                                                                                                            
                                                
    export default defineComponent({
        components: {
                                                                                },
        setup() {
            // 省市区数据
            const cityData = regions
            const route = useRoute();
            const router = useRouter();
            const store = useStore();
            let routeId = route.params.id;
            let orderMaterialRelationListApp = inject('orderMaterialRelationListApp', reactive({}));
            const orderMaterialRelationModalApp = reactive({
                id: null,
                    orderMaterialRelation: {},
                isEdit: false,
                display: false
            });
                orderMaterialRelationModalApp.rules = {
                                                                                                                                                                            materialOrderId: [
                                                                                                                {
                            required:                                 true ,
                                type: 'number',
                                message: '请输入材料订单id',
                                trigger: 'blur'
                            }
                        ],
                                                                                    materialId: [
                                                                                                                {
                            required:                                 true ,
                                type: 'number',
                                message: '请输入材料id',
                                trigger: 'blur'
                            }
                        ],
                                                                                    materialName: [
                                                                                                                {
                            required:  false ,
                                type: 'string',
                                message: '请输入材料名称',
                                trigger: 'blur'
                            }
                        ],
                                                                                    amount: [
                                                                                                                {
                            required:                                 true ,
                                type: 'number',
                                message: '请输入数量',
                                trigger: 'blur'
                            }
                        ],
                                                                                                                                                                                                }

            onMounted(() => {
                //清理数据
                    orderMaterialRelationModalApp.orderMaterialRelation = reactive({});
                if (routeId) {//路由
                        orderMaterialRelationModalApp.id = routeId;
                        orderMaterialRelationModalApp.display = false;
                    findOrderMaterialRelation(orderMaterialRelationModalApp.id);
                } else if (orderMaterialRelationListApp.editModalForEdit) {//修改弹窗
                        orderMaterialRelationModalApp.id = orderMaterialRelationListApp.currentId;
                        orderMaterialRelationModalApp.display = true;
                } else if (!orderMaterialRelationListApp.editModalForEdit && orderMaterialRelationListApp.addModalForEdit) {//新增弹窗
                        orderMaterialRelationModalApp.display = true;
                } else {
                        orderMaterialRelationModalApp.title = "新增学生";
                }
                if (orderMaterialRelationModalApp.id) findOrderMaterialRelation(orderMaterialRelationModalApp.id);
            })

            const findOrderMaterialRelation = (id) => {
                    OrderMaterialRelationService.findOrderMaterialRelationForView(id).then((res) => {
                        orderMaterialRelationModalApp.orderMaterialRelation = res.data;
                    //TODO:为编辑准备.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                orderMaterialRelationModalApp.title = "编辑学生 " + orderMaterialRelationModalApp.orderMaterialRelation.name;
                }).catch(error => {
                    VXETable.modal.message({content: `查找学生出错，原因是：${error.message}`, status: 'error'});
                })
            }

            /*TODO:提交 新增&编辑*/
            const onSubmit = (data) => {
                // debugger;
                //当为数组时用逗号连接
                                                                                                                                                                                                                                                                                                                                                                                                                                            if (data.eid) {
                    //修改
                        OrderMaterialRelationService.updateOrderMaterialRelation(data).then((res) => {
                        console.log(res);
                        VXETable.modal.message({content: '操作成功', status: 'success'});
                        setTimeout(onBack, 3000);
                    }).catch(error => {
                        VXETable.modal.message({content: `系统错误，原因是：${error.message}`, status: 'error'});
                    })
                } else {
                    //新增
                        OrderMaterialRelationService.saveOrderMaterialRelation(data).then((res) => {
                        console.log(res);
                        VXETable.modal.message({content: '操作成功', status: 'success'});
                        setTimeout(onBack, 3000);
                    }).catch(error => {
                        VXETable.modal.message({content: `系统错误，原因是：${error.message}`, status: 'error'});
                    })
                }
            }

            /*TODO:继续提交*/
            const continueSubmit = () => {
                VXETable.modal.message({content: 'error 提示', status: 'error'});
            }

            /*TODO:返回列表*/
            const onBack = () => {
                router.push(`/restaurant/material/orderMaterialRelation`);
                store.dispatch('user/tabRemove', route.fullPath);

            }
                                                                                                                                                                                                                                                                                                                                            return {
                cityData,
                routeId,
                    orderMaterialRelationListApp,
                    orderMaterialRelationModalApp,
                onSubmit,
                continueSubmit,
                onBack,
                                                                                                                                                                                                                                                                                                                                                                                                                                        }

        },
    })
</script>

<style scoped>

</style>
